<script>
    import List from '../components/list.svelte';
    import Btn from '../components/btn.svelte';
    import QueryBar from '../components/queryBar.svelte';
    import Paging from '../components/paging.svelte';
    import { onMount } from 'svelte';
    import { Post } from '../lib/net.js';
    import { OtcConfirm,OtcTransactions,AgentList ,SearchAgent} from '../api.js';
    import { OtcState,OtcType } from '../conf.js';
    import Query from '../model/query.js';
    import Event from '../model/event.js';
    import moment from 'moment';
    import BtnSmall from '../components/btn-small.svelte';

    let info = {
        total: 0,
        many: 0,
        less: 0,
        users: 0,
        buy:0,
        sell:0
    }

    let data = {title:[ "用户UID","姓名","手机号","邮箱","代理人","订单编号","单价","人民币总价","USDT数量","订单类型","创建时间"],data:[]}

    var query = new Query();
    query.size = 7;

    onMount(async ()=>{
        getDoneList();
    });

    async function getList(e){
        if (e) {
            query.start = e.detail.start
            query.end = e.detail.end
            if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
            }else {
                query.admin = null
            }
        }
        let ret = await Post(OtcTransactions,query)
        console.log(ret)
        info.total = ret.total;
        query.total = ret.total;
        info.buy = ret.Extra.buy;
        info.sell = ret.Extra.sell;
        query.page = ret.page;
        let _data = [];

        for(let item of ret.list) {
            let arr = [
				item.order.uid,
				item.user_info.name,
				item.user.phone,
				item.user.email,
				item.user.inviteCode || "",
				item.order.tid,
				(item.order.curreny / item.order.amount).toFixed(2) || "",
				item.order.curreny,
				item.order.amount,
				OtcType[item.order.type],
				item.order.show_created_on,
				//query.type == 1 ? OtcState[item.order.state] : `<button class="button is-small">确认</button>`
			];
            arr.id = item.order.tid;
            // arr.handler = confirm;
            if(query.type == 0) {
                arr.href = "/otc/detail?tid=" + item.order.tid;
            }
            _data.push(arr);
        }
        data.data = _data;
    }


    function setPage(page){
        query.page = page;
        getList();
    }

    function getDoneList(){
        query.type = 1;
        getList();
    }

</script>

<div class="view">
    <div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
         class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            用户资金管理
        </span>
    </div>
    <!--//-->
    <div class=" borderRadius4 container">
        <div class="columns rowReverse">
            <div class="column is-4">
                <!--//-->
                <div class="rowNumCenter">
                    <span class="left1">已买入总计：</span>
                    <span class="mid1" style="color:forestgreen">{info.buy}</span>
                    <span class="left1">USDT</span>
                </div>
                <!--//-->
                <div class="rowNumCenter">
                    <span class="left1">已卖出总计：</span>
                    <span class="mid1" style="color:forestgreen">{info.sell}</span>
                    <span class="left1">USDT</span>
                </div>
                <!--//-->
                <div class="rowNumCenter">
                    <span class="left1">合集净流入：</span>
                    <span class="mid1" style="color:forestgreen">{(info.buy-info.sell).toFixed(2)}</span>
                    <span class="left1">USDT</span>
                </div>
            </div>
        </div>
    </div>
    <div class="borderRadius4 container rowCenter ">
        <QueryBar query={query} on:message={getList} />
    </div>
    <div class="container"  style="margin-top: -10px">
        <List data={data} />
    </div>
    <div class="container rowReverse">
        {#if query.total !== 0}
        <Paging page={query} handler={setPage}/>
            {/if}
    </div>
</div>

<style>
    .columns {
        /*background: #fff;*/
    }
    .borderRadius4{
        border-radius: 4px;
    }
    .container {
        margin:20px 5px;
    }
    .info {
        background: #fff;
    }
    .rowNumCenter{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
    }
</style>
